<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<link rel="stylesheet " type="text/css " href="css/globle.css " />
		<link rel="stylesheet " type="text/css " href="css/03twzb.css" />
		<link rel="stylesheet" type="text/css" href="css/nav.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
		<script src='js/jquery-2.1.4.js'></script>
		<script src="js/super.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<title>互动交流</title>
		<style type="text/css">

		</style>
	</head>

	<body>

		<nav>
			<div class="title">

				<!--广告-->
				<div class="txtMarquee-left">
					<div class="bd">
						<ul class="infoList">
							<li><a href="">中国打破了世界软件巨头规则</a></li>
							<li><a href="">施强：高端专业语言教学</a></li>
							<li><a href="">新加坡留学，国际双语课程</a></li>
							<li><a href="">高考后留学日本名校随你选</a></li>
							<li><a href="">教育培训行业优势资源推介</a></li>
							<li><a href="">女友坚持警局完婚不抛弃</a></li>
						</ul>
					</div>
				</div>
				<!--图片-->
				<span class="image"><img src="img/nav.jpg"/></span>
				<ul class="nav-bot">
					<li class="nav-bot1">
						<img src="img/logo.jpg" />
					</li>
					<li class="nav-bot2">
						<i class="fa fa-user-o"></i>
						<span>999</span>
					</li>
					<li class="nav-bot3">
						<i class="fa fa-commenting-o"></i>
						<span>999</span>
					</li>
					<li class="nav-bot4">
						<i class="fa fa-arrows-alt"></i>
					</li>
				</ul>
			</div>
		</nav>

		<div class="choose" id="choose">
			<ul>
				<li class="active">议程安排</li>
				<li>图文直播</li>
				<li>互动交流</li>
				<li>精彩回顾</li>
			</ul>
		</div>

		<section class="talk">
			<div class="talk-left">
				<span class="tx"><img src="img/logo.jpg"/></span>
				<div class="name">
					<span>北京经纬中天信息有限公司</span>
					<div>
						<span class="name1"><i class="fa fa-clock-o"></i></span>
						<span class="name2">2017-05-10</span>
						<span class="name3">15:25</span>
					</div>
				</div>
			</div>
			<div class="talk-right">
				<span class="talk-right1"><i class="fa fa-thumbs-o-up fa-lg"></i></span>
				<span class="talk-right2">666</span>
			</div>

			<div class="stage">
				<span>
					举办奥运会是中华民族的百年梦想、千年盛事。2008年，奥运圣火在古老的华夏大地燃烧，第29届夏季奥运会在北京举办。举办奥运会是我国各族人民的共同心愿，是中华民族的百年企盼。
				</span>
			</div>
		</section>

		<section class="talk">
			<div class="talk-left">
				<span class="tx"><img src="img/logo.jpg"/></span>
				<div class="name">
					<span>北京经纬中天信息有限公司</span>
					<div>
						<span class="name1"><i class="fa fa-clock-o"></i></span>
						<span class="name2">2017-05-10</span>
						<span class="name3">15:25</span>
					</div>
				</div>
			</div>
			<div class="talk-right">
				<span><i class="fa fa-thumbs-o-up fa-lg"></i></span>
				<span>666</span>
			</div>

			<div class="stage">
				<span>
					举办奥运会是中华民族的百年梦想、千年盛事。2008年，奥运圣火在古老的华夏大地燃烧，第29届夏季奥运会在北京举办。举办奥运会是我国各族人民的共同心愿，是中华民族的百年企盼。
				</span>
			</div>
		</section>

		<section class="talk sound" id="sound">
			<div class="talk-left">
				<span class="tx"><img src="img/logo.jpg"/></span>
				<div class="name">
					<span>北京经纬中天信息有限公司</span>
					<div>
						<span class="name1"><i class="fa fa-clock-o"></i></span>
						<span class="name2">2017-05-10</span>
						<span class="name3">15:25</span>
					</div>
				</div>
			</div>
			<div class="talk-right">
				<span><i class="fa fa-thumbs-o-up fa-lg"></i></span>
				<span>666</span>
			</div>

			<div class="sound1">
				<span>10 "</span>
				<img src="img/wf.jpg" />
			</div>

		</section>

		<!--图片-->
		<section class="talk picture">
			<div class="talk-left">
				<span class="tx"><img src="img/004.jpg"/></span>
				<div class="name">
					<span>北京经纬中天信息有限公司</span>
					<div>
						<span class="name1"><i class="fa fa-clock-o"></i></span>
						<span class="name2">2017-05-10</span>
						<span class="name3">15:25</span>
					</div>
				</div>
			</div>
			<div class="talk-right">
				<span><i class="fa fa-thumbs-o-up fa-lg"></i></span>
				<span>666</span>
			</div>

			<div class="picture1">
				<span><img src="img/004.jpg"/></span>
			</div>

		</section>

		<!--礼物-->
		<section class="talk gift">
			<div class="talk-left">
				<span class="tx"><img src="img/004.jpg"/></span>
				<div class="name">
					<span>Hello</span>
					<div>
						<span class="name1"><i class="fa fa-clock-o"></i></span>
						<span class="name2">2017-05-10</span>
						<span class="name3">15:25</span>
					</div>
				</div>
			</div>
			<div class="talk-right">
				<span><i class="fa fa-thumbs-o-up fa-lg"></i></span>
				<span>666</span>
			</div>

			<div class="gift1">
				<div class="gift-left">
					<span>"Hello"&nbsp;送出一个棒棒糖</span>
					<img src="img/bbt.jpg" />
				</div>
				<div class="gift-right">
					<img src="img/soso.jpg" />
				</div>
			</div>

		</section>

		<div class="send talk">
			<input type="text" name="" id="" value="" placeholder="&nbsp;&nbsp;你想说点什么" />
			<span><img src="img/0301.jpg"/></span>
			<span><img src="img/0302.jpg"/></span>
		</div>

	</body>

</html>

<script type="text/javascript">

	jQuery(".txtMarquee-left").slide({
		mainCell: ".bd ul",
		autoPlay: true,
		effect: "leftMarquee",
		vis: 2,
		interTime: 50
	});
	$('.choose ul li').click(function() {
		$(this).addClass('active').siblings().removeClass('active')
	})
</script>